<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse animated fadeInLeft">
        <ul side-navigation class="nav metismenu" id="side-menu">
            <li class="nav-header">
                <div class="profile-element" uib-dropdown>
                    <img alt="image" class="img-circle" src="img/profile_small.jpg"/>
                    <a uib-dropdown-toggle href>
                            <span class="clear">
                                <span class="block m-t-xs">
                                    <strong class="font-bold">David Williams</strong>
                             </span>
                                <span class="text-muted text-xs block">Art Director <b class="caret"></b></span>
                            </span>
                    </a>
                    <ul uib-dropdown-menu class="animated fadeInRight m-t-xs">
                        <li><a ui-sref="app.profile">Profile</a></li>
                        <li><a ui-sref="app.contacts">Contacts</a></li>
                        <li><a ui-sref="mailbox.inbox">Mailbox</a></li>
                        <li class="divider"></li>
                        <li><a ui-sref="logins">Logout</a></li>
                    </ul>
                </div>
                <div class="logo-element">
                    IN+
                </div>
            </li>

            <li ui-sref-active="active">
                <a ui-sref="base_view.home.home_page">
                    <i class="fa fa-home"></i>
                    <span class="nav-label">{{ 'HOME' | translate }}</span>
                </a>
            </li>
            <li ng-class="{active: $state.includes('base_view.trans')}">
                <a href="">
                    <i class="fa fa-list-alt"></i>
                    <span class="nav-label">{{ 'TRANS' | translate }}</span>
                    <span class="fa arrow"></span>
                </a>
                <ul class="nav nav-second-level collapse" ng-class="{in: $state.includes('base_view.trans')}">
                    <li ui-sref-active="active">
                        <a ui-sref="base_view.trans.trans_info">{{ 'TRANS_INFO' | translate }}</a>
                    </li>
                    <li ui-sref-active="active">
                        <a ui-sref="dashboards.dashboard_2">{{ 'TRANS_CHANGE' | translate }}</a>
                    </li>
                    <li ui-sref-active="active">
                        <a ui-sref="dashboards.dashboard_2">{{ 'TRANS_STATISTICS' | translate }}</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href=""><i class="fa fa-sitemap"></i> <span
                        class="nav-label">{{ 'MENULEVELS' | translate }}</span><span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse">
                    <li>
                        <a href="">Third Level <span class="fa arrow"></span></a>
                        <ul class="nav nav-third-level">
                            <li>
                                <a href="">Third Level Item</a>
                            </li>
                            <li>
                                <a href="">Third Level Item</a>
                            </li>
                            <li>
                                <a href="">Third Level Item</a>
                            </li>

                        </ul>
                    </li>
                    <li><a href="">Second Level Item</a></li>
                    <li>
                        <a href="">Second Level Item</a></li>
                    <li>
                        <a href="">Second Level Item</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>